Checks and radios

If you want to use other icons, we recommend adding a class on every SVG icon .svg-circle and .svg-check on each SVG path.

Checkbox

Checkbox

<div class="checkbox-type type-1">
    <input class="checkbox-type-input" type="checkbox" value="" id="checkExample" />
    <label class="checkbox-type-label" for="checkExample">
        <div class="checkbox-type-icon">
            <img src="./assets/icons/check-circle-stroke.svg" class="svg-inject" alt="" />
        </div>
        <div class="checkbox-type-text fw-semiBold">Checkbox</div>
    </label>
    </div>
    <div class="checkbox-type type-1">
    <input class="checkbox-type-input" type="checkbox" value="" id="checkExampleActive" checked />
    <label class="checkbox-type-label" for="checkExampleActive">
        <div class="checkbox-type-icon">
            <img src="./assets/icons/check-circle-stroke.svg" class="svg-inject" alt="" />
        </div>
        <div class="checkbox-type-text fw-semiBold">Checkbox</div>
    </label>
</div>

<div class="checkbox-switch">
    <input class="checkbox-switch-input" type="checkbox" role="switch" id="swicthCheckExample" />
    <label class="checkbox-switch-label" for="swicthCheckExample">
        <div class="checkbox-switch"></div>
        <div class="checkbox-switch-text fw-semiBold">Switch Checkbox</div>
    </label>
    </div>
<div class="checkbox-switch">
    <input class="checkbox-switch-input" type="checkbox" role="switch" id="swicthCheckExampleActive" checked />
    <label class="checkbox-switch-label" for="swicthCheckExampleActive">
        <div class="checkbox-switch"></div>
        <div class="checkbox-switch-text fw-semiBold">Switch Checkbox</div>
    </label>
</div>

You can also place the title before Swith Chexbox with addition class .checkbox-switch-end.

<div class="checkbox-switch checkbox-switch-end">
    <input class="checkbox-switch-input" type="checkbox" role="switch" id="swicthCheckEndExample" />
    <label class="checkbox-switch-label" for="swicthCheckEndExample">
        <div class="checkbox-switch"></div>
        <div class="checkbox-switch-text fw-semiBold">Switch Checkbox</div>
    </label>
</div>
<div class="checkbox-switch checkbox-switch-end">
    <input class="checkbox-switch-input" type="checkbox" role="switch" id="swicthCheckEndExampleActive" checked />
    <label class="checkbox-switch-label" for="swicthCheckEndExampleActive">
        <div class="checkbox-switch"></div>
        <div class="checkbox-switch-text fw-semiBold">Switch Checkbox</div>
    </label>
</div>

Variables

You can find every SASS Variable on scss/components/bootstrap/forms/_form-check.scss

Checkbox

$checkbox-type-base-svg-size: 20px;

$checkbox-type-label-font-size: $font-size-base;
$checkbox-type-label-font-weight: $font-weight-normal;
$checkbox-type-label-color: $dark;
$checkbox-type-label-gap: 10px;

// checkbox-type-1
$checkbox-type-1-color: $pale-lavender;
$checkbox-type-1-color__checked: $primary;

Checkbox Switch

$checkbox-swicth-background: $light-silver;
$checkbox-swicth-background__checked: $pale-lavender;
$checkbox-swicth-width: 30px;
$checkbox-swicth-height: 16px;
$checkbox-swicth-border-radius: 50rem;

$checkbox-swicth-circle-background: $spanish-gray;
$checkbox-swicth-circle-background__checked: $primary;
$checkbox-swicth-circle-size: 20px;
$checkbox-swicth-circle-border-radius: 50rem;

$checkbox-swicth-label-font-size: $font-size-base;
$checkbox-swicth-label-font-weight: $font-weight-normal;
$checkbox-swicth-label-color: $dark;
$checkbox-swicth-label-gap: 10px;